<template>
  <!-- 修改原始的 u-upload -->
  <v-upload
    ref="uUpload"
    :auto-upload="false"
    :file-list="fileList"
    @on-oversize="oversize"
    @on-choose-complete="afterRead"
    @on-remove="deletePic"
    :multiple="multiple"
    :maxCount="maxCount"
    :accept="accept"
    :maxSize="maxSize"
    previewImage

  >
  </v-upload>
  <!-- <uni-file-picker
    v-model="fileList"
    :imageStyles="imageStyles"
    @select="afterRead"
    @delete="deletePic"
    limit="9"
    title="最多选择9张图片"
  ></uni-file-picker> -->
</template>

<script>
import { uploadImage } from '@/api/common';
export default {
  props: {
    maxCount: {
      type: Number,
      default: 10
    },
    maxSize: {
      type: Number,
      default: 10 * 1024 * 1024 // 10 兆
    },
    multiple: {
      type: Boolean,
      default: true
    },
    // all | media | image | file | video (只有微信小程序支持 all、media)
    accept: {
      type: String,
      default: 'image'
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileList: [],
      imageStyles: {
        width: 100,
        height: 100,
        border: {
          radius: '8px'
        }
      }
    };
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  watch: {
    value(val) {
      if (val && !this.fileList.length) {
        console.log('value watch');
        this.fileList = val.split(',').map(e => {
          return {
            url: e,
            error: false,
            progress: 100
          };
        });
      }
    }
  },
  created() {

  },
  methods: {
    change() {
      console.log(this.$refs.uUpload.lists, 'this.$refs.uUpload.lists');
      const files = this.$refs.uUpload.lists.filter(val => {
        return val.progress == 100;
      }).concat(this.fileList);
      const url = files.map(e => e.url).join(',');
      this.$emit('input', url);
      this.$emit('change', url);
    },
    // 删除图片
    deletePic(event) {
      this.fileList.splice(event.index, 1);
      this.change();
    },
    oversize(e, err) {
      uni.showModal({
        content: `最大${this.maxSize}兆！`,
        showCancel: false
      });
    },
    // 新增图片
    async afterRead(event) {
      console.log(event, 'event');
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let fileListLen = 0;
      const lists = [].concat(event); // tempFiles
      for (let i = 0; i < lists.length; i++) {
        const result = await uploadImage({ url: lists[i].url, fileType: this.accept });
        let status = 'failed';
        let error = '';
        const files = this.$refs.uUpload.lists;
        const item = files[fileListLen];
        if (!result.err) {
          status = 'success';
        } else {
          error = result.err.errMsg;
        }
        ;
        files.splice(fileListLen, 1, Object.assign(item, {
          status,
          error,
          url: result.url
        }));
        fileListLen++;

        console.log(this.fileList, 'this.fileList');

        this.change();
      }
    }
  }

};
</script>
<style lang="scss">
.icon-del {
  background: #fff;
}
</style>
